/**
 * 图片裁剪上传
 * cropper（使用三方插件）
 */
class ImgUp{
    /**
     *
     * @param {Object} options 参数
     * @param {String} options.selector     DOM
     * @param {String} options.url          上传地址
     */
    constructor(options) {
        this.options = $.extend({}, options);
        this.$dom = this.options.selector
        // 最外围div生成随机class
        let time = new Date().getTime()
        this.$boxClass = 'wd-img-upfile' + time
        this.$box = '.wd-img-upfile' + time
    }

    /**
     * 初始化
     */
    init(){
        // 初始dom
        $(this.$dom).append(this.render())
        // 初始预览图
        this.imgCropper(this.$box+' .photo',this.$box+' .input');
        // 监听截图
        $(document).on('click',this.$box+' .corpClick',() => {
            this.corpClick(this.$box+' .photo',this.$box+' .result')
        });
        // 监听提交
        $(document).on('click',this.$box+' .commitClick',() => {
            this.commitClick(this.$box+' .photo',this.options.url)
        });
        // 监听取消
        $(document).on('click',this.$box+' .cancelClick',() => {
            this.cancelClick()
        });
    }

    /**
     * 初始化domR
     * @returns {string}  返回html
     */
    render(){
        return `<div class="wd-img-upfile ${this.$boxClass}">
                    <div class="row">
                        <div class="col-sm-12 text-center">
                            <label for="label-input" class="btn btn-danger" id="">
                                <span>选择图片</span>
                                <input type="file" class="sr-only input" id="label-input">
                            </label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 col-sm-offset-2">
                            <img src="" class="photo">
                        </div>
                        <div class="col-sm-2">
                            <div>
                                <p>预览(100*100)：</p>
                                <div class="img-preview"></div>
                            </div>
                            <button class="btn btn-primary corpClick">裁剪图片</button>
                            <div>
                                <p>结果：</p>
                                <img src="" alt="裁剪结果" class="result">
                            </div>
                            <button class="btn btn-primary commitClick">提交</button>
                            <button class="btn btn-primary cancelClick">取消</button>
                        </div>
                    </div>
                </div>`
    }

    /**
     * 初始化预览图
     * @param {String} img      DOM（原图）
     * @param {String} input    DOM（上传的input）
     */
    imgCropper(img,input){
        // 修改自官方demo的js
        let $image = $(img);
        let options = {
            aspectRatio: 1, // 纵横比
            viewMode: 2,
            preview: '.img-preview' // 预览图的class名
        };
        $image.cropper(options);
        let $inputImage = $(input);
        let URL = window.URL || window.webkitURL;
        let uploadedImageURL;
        if (URL) {
            // 给input添加监听
            $inputImage.change(function () {
                let files = this.files;
                let file;
                if (!$image.data('cropper')) {
                    return;
                }
                if (files && files.length) {
                    file = files[0];
                    // 判断是否是图像文件
                    if (/^image\/\w+$/.test(file.type)) {
                        // 如果URL已存在就先释放
                        if (uploadedImageURL) {
                            URL.revokeObjectURL(uploadedImageURL);
                        }
                        uploadedImageURL = URL.createObjectURL(file);
                        // 销毁cropper后更改src属性再重新创建cropper
                        $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
                        $inputImage.val('');
                    } else {
                        alertify.error('请选择一个图像文件！');
                    }
                }
            });
        } else {
            $inputImage.prop('disabled', true).addClass('disabled');
        }
    }

    /**
     * 剪切图片
     * @param {String} img       DOM（原图）
     * @param {String} target    DOM（剪切后的图）
     */
    corpClick(img,target){
        let $image = $(img);
        let $target = $(target);
        let URL = window.URL || window.webkitURL;
        $image.cropper('getCroppedCanvas',{
            width:300, // 裁剪后的长宽
            height:300
        }).toBlob(function(blob){
            // 裁剪后将图片放到指定标签
            $target.attr('src', URL.createObjectURL(blob));
        });
    }

    /**
     * 上传提交
     * @param {String} img   DOM（原图）
     * @param {String} url   上传地址
     */
    commitClick(img,url){
        if(!url){
            alertify.error('必须填写上传路径');
            return
        }
        // 得到PNG格式的dataURL  base64   具体后端约定再定那种格式
        let photo = $(img).cropper('getCroppedCanvas', {
            width: 300,
            height: 300
        }).toDataURL('image/png');
        wdAjax.post({
            url: url, // 要上传的地址
            data: {
                'imgData': photo
            },
            dataType: 'json',
            success: function (data) {

            }
        });
    }

    /**
     * 取消上传
     */
    cancelClick(){
        $(this.$box).remove()
    }
}